<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
	<!--<script type="text/javascript">-->
	<!--$(function(){-->
		<!--$("#u2_c").hide();-->
		<!--$("#direct").hide();-->
		<!--$("#sel").change(function(){-->
			<!--$("#u2_c").show();-->
			<!--$("#direct").show();-->
			<!--$("#u2_c").find("option").remove();-->
			<!--var s1=$(this).val();-->
			<!--if(s1=="city"){-->
				<!--$("#u1 li").each(function(){-->
					<!--$("#u2_c").append("<option>"+$(this).text()+"</option>")-->
				<!--})-->
			<!--}-->
			<!--if(s1=="game"){-->
				<!--$("#u2 li").each(function(){-->
					<!--$("#u2_c").append("<option>"+$(this).text()+"</option>");-->
				<!--})-->
			<!--}-->
			<!--$("#sel option[value='select']").remove();-->
		<!--})-->


		<!--$(":button[name='btn']").click(function(){-->
			<!--//获取输入的文本内容-->
			<!--var text=$(":input[name='text']").val();-->
			<!--//获取已选择的城市名或游戏名-->
			<!--var name=$("#u2_c option:selected").text();-->

			<!--var index=$("#u2_c option:selected").index();-->
			<!--alert(index)-->
			<!--//当为选择城市时，遍历城市中的标签-->
			<!--if($("#sel option:selected").val()=="city"){-->
				<!--if($("#direct option:selected").val()=="up"){-->
					<!--$($("#u1 li").get(index)).before("<li>"+text+"</li>"); -->
				<!--}-->
				<!--if($("#direct option:selected").val()=="down"){-->
					<!--$($("#u1 li").get(index)).after("<li>"+text+"</li>");-->
				<!--}-->
			<!--}-->
			<!--if($("#sel option:selected").val()=="game"){-->
				<!--if($("#direct option:selected").val()=="up"){-->
					<!--$($("#u2 li").get(index)).before("<li>"+text+"</li>");-->
				<!--}else{-->
					<!--$($("#u2 li").get(index)).after("<li>"+text+"</li>");-->
				<!--}-->
			<!--}-->
		<!--});-->


	<!--});-->
	<!--</script>-->
</head>
<body>
	城市
	<ul id="u1">
		<li>北京</li>
		<li>天津</li>
		<li>重庆</li>
	</ul>
	游戏
	<ul id="u2">
		<li>星际</li>
		<li>魔兽</li>
	</ul>
	<input type="text" name="text">
	<input type="button" name="btn" value="添加">
	<select name="" id="sel">
		<option value="select">-请选择-</option>
		<option value="city">城市</option>
		<option value="game">游戏</option>
	</select>
	<select name="" id="u2_c"></select>
	<select name="" id="direct">
		<option value="down">下</option>
		<option value="up">上</option>
	</select>
	<script>
		//方法1:遍历城市所有节点并放入城市选择框
		var cityshow=function(){
			$("#u2_c").children().remove();
			$("#u1 li").each(function(i){
				$("#u2_c").append("<option value='"+i+"'>"+$(this).text()+"</option>");
			});
			$("#sel option[value='select']").remove();
			$("#u2_c").show();
			$("#direct").show();
		}
		//方法2:遍历游戏所有节点并放入游戏选择框
		var gameshow=function(){
			$("#u2_c").children().remove();
			$("#u2 li").each(function(i){
				$("#u2_c").append("<option value='"+i+"'>"+$(this).text()+"</option>");
			});
			$("#u2_c").show();
			$("#direct").show();
		}
		//先隐藏城市/游戏列表下拉菜单及前后下拉菜单
		$("#u2_c").hide();
		$("#direct").hide();
		//城市/游戏点击事件,调用城市/游戏方法
		$("#sel").change(function(){
			if($("#sel option:selected").val()=='city'){
				cityshow();

			}else if($("#sel option:selected").val()=='game'){
				gameshow();
			}
		});
		//点击添加,判断前后内容,调用指定方法
		$("input[name='btn']").click(function(){
			var text = $("input[name='text']").val();
			var dir = $("#direct option:selected").val();
			var type = $("#sel option:selected").val();
			var num = $("#u2_c option:selected").val();
			if(text!=''&&text!=null){
				if(dir=='down'){
					if(type=='city'){
						$("#u1 li").each(function(i){
							if(i==num){
								$(this).after("<li>"+text+"</li>");
							}
						});
					}else if(type=="game"){
						$("#u2 li").each(function(i){
							if(i==num){
								$(this).after("<li>"+text+"</li>");
							}
						});
					}
				}else if(dir=="up"){
					if(type=='city'){
						$("#u1 li").each(function(i){
							if(i==num){
								$(this).before("<li>"+text+"</li>");
							}
						});
					}else if(type=="game"){
						$("#u2 li").each(function(i){
							if(i==num){
								$(this).before("<li>"+text+"</li>");
							}
						});
					}
				}
			}
			//更新下拉菜单内容
			var statue = $("#sel option:selected").val();
			if(statue=="city"){
				cityshow();
			}else if(statue=="game"){
				gameshow();
			}
		});




	</script>
</body>
</html>